@charset "utf-8";
/* CSS Document */
.banner img {width: 100%; height: auto; margin: 0px auto;}
.main  {max-width: 1200px; background-color: white; padding: 20px;margin: 0 auto;}
* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
 /* padding: 20px;*/
  font-family: Arial;
}
.poster-add{padding: 0px;}
/* Center website */


h1 {
  font-size: 50px;
  word-break: break-all;
}

.row-about {
  margin: 8px -16px;
	 
}
.row-about img{ border-radius: 8px;}
/* Add padding BETWEEN each column */
.row-about,
.row-about > .column-about {
  padding: 8px;
	
}

/* Create four equal columns that floats next to each other */
.column-about {
  float: left;
  width: 25%;
	 
}

/* Clear floats after rows */ 
.row-about:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content-about {
  background-color: white;
  padding: 10px;
}
.small-text-size {
	color: lightgray;
	font-size: 6pt;
}
.content-about img{ border-radius: 8px;}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
	
	.column-about {
    width: 50%;
  }
	
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	
  .column-about {
    width: 100%;
  }
	
}

.performance-areas p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #1F1F1F;
}

.performance-areas h3 {
    font-size: 1.6em;
    margin-top: 30px;
    color: #f05454;
}

.performance-areas h3:before {
    content: "✧ ";
    color: #f05454;
}



.performance-areas ul {
    margin-bottom: 30px;
}
.performance-areas {
   /* background: linear-gradient(135deg, #F1F1F1, #E9E9E9);*/
    padding: 0px;
    border-radius: 10px;
   /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);*/
    color: white;
    text-align: center;
    margin: 0 auto ;
    max-width: 1200px;
	width:100%;
}

.performance-areas h2 {
    font-size: 2em;
    font-family: 'Arial', sans-serif;
    margin-bottom: 20px;
	color: black;
}
.city-list li a {text-decoration: none; color: white;}
.city-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    font-family: 'Helvetica', sans-serif;
}

.city-list li {
    background-color: #1B1B1B;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.2em;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.city-list li:hover {
    transform: scale(1.05);
    background-color: #30475e;
}
.tour-city-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.tour-city-list li {
    background-color: #1B1B1B;
    padding: 10px;
    border-radius: 5px;
    font-size: 1.2em;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.tour-city-list li:hover {
    transform: scale(1.05);
    background-color: #30475e;
}

.contact-call-to-action {
    background-color: #1c1c1c;
    color: white;
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    margin: 30px auto;
    max-width: 800px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.contact-call-to-action h2 {
    font-size: 2em;
    margin-bottom: 20px;
    font-family: 'Arial', sans-serif;
}

.contact-call-to-action p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: 'Helvetica', sans-serif;
}

.contact-btn {
    display: inline-block;
    background-color: #f05454;
    color: white;
    padding: 15px 30px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-btn:hover {
    background-color: #30475e;
    transform: scale(1.05);
}